<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<view class="title">账号密码登录</view>
			<view class="input-wrap">
				<input class="u-border-bottom" type="number" v-model="form.user" placeholder="用户名/手机号" />
			</view>
			<view class="input-wrap">
				<input class="u-border-bottom" type="number" v-model="form.code" placeholder="请输入短信验证码"
					maxlength="6" /><text @click="sendCode">发送验证码</text>
			</view>

			<div class='agree'>
				<u-checkbox v-model="argee"></u-checkbox>同意<text class="link">用户协议</text>和<text class="link">隐私政策</text>
			</div>
			<button @tap="submit" class="login-btn">登录</button>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					user: '',
					code: ''
				},
				argee: false
			}
		},
		watch: {
			argee(val) {
				console.log(val)
			}
		},

		methods: {
			sendCode() {

			},
			//登录
			submit() {
				if (!this.argee) {
					return uni.showToast({
						title: '请先勾选同意用户协议',
						icon: 'none'
					})
				}
				if (!this.form.user) {
					return uni.showToast({
						title: '请输入用户名/手机号',
						icon: 'none'
					})
				}
				if (!this.form.code) {
					return uni.showToast({
						title: '请输入短信验证码',
						icon: 'none'
					})
				}
				uni.setStorageSync('isLogin',1)
				uni.switchTab({
					url: '/pages/index/index',
					fail: (err) => {
						console.log(err)
					}
				})


			}
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;
		height: 100vh;
		overflow: hidden;

		.content {
			width: 600rpx;
			margin: 80rpx auto 0;

			.agree {
				margin: 50rpx 0;
				color: #999;

				.link {
					margin: 0 10rpx;
					color: #000000;
					font-weight: 700;
				}
			}

			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			.input-wrap {
				border-bottom: 1px solid #999;
				margin: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					color: $primaryColor;
				}

				input {
					padding: 20rpx;
				}
			}

			.login-btn {
				border-radius: 50rpx;
				outline: none;
				border: none;
				padding: 10rpx;
				background-color: $primaryColor;
				color: #FFFFFF;
			}
		}

	}
</style>
